<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增装潢单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="statics/css/bootstrap.css">
    <link rel="stylesheet" href="statics/css/bootstrap-datetimepicker.css">
    <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
    <script type="text/javascript" src="statics/js/jquery.js"></script>
    <script type="text/javascript" src="statics/js/popper.min.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="statics/js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<style>
    .table th, .table td {
        text-align: center;
        vertical-align: middle!important;
    }
</style>
<body>

<script type="text/javascript">


    //初始化标签，配置日期格式插件相关参数
    $(function () {
        $(".form_datetime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 'month',
            language: 'zh-CN',
            autoclose: true,//选中自动关闭
            startDate: '1900-01-01',
            todayBtn: true
            //显示今日按钮
        });
    });


</script>


<div class="container">

    <div>

        <form class="form-horizontal" method="post" action="insertEquipment" id="decorationForm">
            <h4 class="page-header">装潢信息</h4>

            <div class="form-inline">
                <table class="table-responsive " style="border-collapse: separate;border-spacing:0 5px ">
                    <tr>
                        <td><label>装潢单号</label></td>
                        <td><input type="text" class="form-control" id="equipmentSheetNo" name="equipmentSheetNo" value="${equipmentSheetNo}" readonly></td>

                        <td style="padding-left: 30px"><label>装潢业务类型</label></td>
                        <td><select class="form-control" name="upholsteryType" id="upholsteryType">
                            <#list upholsteryTypeList as type>
                            <option value="${type.upholsteryType}" >${type.upholsteryType}</option>
                        </#list></select>

                           </td>

                        <td style="padding-left: 30px"><label>负责人</label></td>
                        <td><input type="text" class="form-control" name="employeeName" id="employeeName" value="${employeeName!}" readonly></td>
                        <td><input type="hidden" class="form-control" name="employeeId" id="employeeId" value="${employeeId!}"></td>

                    </tr>


                    <tr>
                        <td><label>备注</label></td>
                        <td colspan="5"><textarea type="text" class="form-control"
                                                  style="min-width:100%" name="comment" id="comment"></textarea></td>
                    </tr>
                </table>


                <h4 class="page-header">客户车辆信息</h4>

                <div class="form-inline">
                    <table class="table-responsive " style="border-collapse: separate;border-spacing:0 5px ">
                        <tr>


                            <td ><label>客户编号</label></td>
                            <td><input type="text" class="form-control" name="customerId" id="customerId" value="${customerId!}" readonly></td>

                            <td style="padding-left: 30px"><label>客户名称</label></td>
                            <td><input type="text" class="form-control" name="customerName" id="customerName"></td>

                            <td><label style="padding-left: 30px">电话</label></td>
                            <td><input type="text" class="form-control" name="customerTel" id="customerTel"></td>


                        </tr>


                        <tr>

                            <td><label>车系</label></td>
                            <td><input type="text" class="form-control" name="series" id="series"></td>

                            <td style="padding-left: 30px"><label>车型</label></td>
                            <td><input type="text" class="form-control" name="model" id="model"></td>

                            <td style="padding-left: 30px"><label>颜色</label></td>
                            <td><input type="text" class="form-control" name="color" id="color"></td>
                        </tr>
                        <tr>

                            <td><label>VIN</label></td>
                            <td><input type="text" class="form-control" name="vin" id="vin"></td>
                            <td style="padding-left: 30px"><label>车牌号</label></td>
                            <td><input type="text" class="form-control" name="carCard" id="carCard"></td>
                        </tr>

                    </table>


                </div>



    </div>



            <h4 class="page-header">车辆施工信息</h4>
            <div class="form-inline">
                <label>预计开工日期</label> <input type="text" class="form-control date form_datetime
        input-group" data-date-format="dd-MM-yyyy" readonly name="startTime" id="startTime">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>预计完工日期</label> <input type="text"  class="form-control date form_datetime
        input-group" data-date-format="dd-MM-yyyy" readonly name="endingTime" id="endingTime">
            </div>
           <!-- <div class="form-inline">
                <input type="submit" class="btn btn-success" value="提交" id="decorationSubmit">
                <input type="reset" class="btn btn-warning" value="重置">

            </div>-->
        </form>
    </div>
    <hr>
    <div>
        <h4>
            <button class="btn btn-info " type="button" onclick="javascript:searchAllCarParts()">装潢用品</button>
        </h4>

        <table class="table " width="100%" id="selectedDecoration">
            <tr class="success">
                <th width="80px">序号</th>
                <th width="80px">用品名称</th>
                <th width="80px">数量</th>
                <th width="80px">计量单位</th>
                <th width="80px">销售指导价</th>
                <th width="80px">折扣率</th>
                <th width="80px">实际价格</th>
                <th width="80px">合计</th>
            </tr>


        </table>
    </div>
    <div class="container">
        <form class="form-horizontal">
            <div class="form-inline">
                <label>合计金额</label><input class="form-control" id="totalPrice" readonly>
                <label>应收金额</label><input class="form-control" id="receivables" readonly>
                <label>赠送金额</label><input class="form-control" id="givenMoney" readonly>
                <button type="button" class="btn btn-success btn-sm col-md-offset-1 "   id="decorationSubmit">提交</button>
                <a class="btn btn-warning btn-sm" href="/insertEquipment" >重置</a>


            </div>
        </form>

    </div>



</div>


<!-- 模态框（Modal） -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header >
               <button type=" button
            " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">装潢用品列表</h4>
        </div>
        <div class="modal-body ">

            <table class="table table-striped " width="100%" id="carCartsTable">
                <tr class="success">
                    <td width="80px">序号</td>
                    <td width="80px">操作</td>
                    <td width="80px">配件名</td>
                    <td width="80px">价格</td>
                    <td width="80px">数量</td>
                    <td width="80px">计量单位</td>
                    <td width="80px">成品价格</td>
                    <td width="80px">销售指导价</td>
                    <td width="80px">折扣率</td>
                    <td width="80px">实际价格</td>
                </tr>



            </table>

        <div class=" center-block" id="page_navigation">


        </div>
            <input id="current_page" type="hidden">
            <input id="show_per_page" type="hidden">
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="carPartsSubmit">提交更改</button>
        </div>
    </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->


<script type="text/javascript">
    function searchAllCarParts() {

        $.ajax({
            type: "GET",
            url: "getCarParts",
            dataType: "json",
            contentType:"application/json",
            async: false,
            cache: false,
            success: function (data) {
                $("#carCartsTable tr:not(:first)").remove();
                $(data).each(function (index, carParts) {
                    var tr = " <tr> <td>" + (index+1) + "</td> "+
                        "<td> <button value='' type='button' class='btn btn-default btn-xs transPlus'>"+
                        "<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>"+
                       " </button>" +"<input type='text' value='0' style='width: 30px' readonly>"+
                        "<button type='button' class='btn btn-default btn-xs  transMinis'>" +
                        "<span class='glyphicon glyphicon-minus' aria-hidden='true'></span>" +
                        "</button></td><td>" + carParts.carPartsName + "</td>" +
                        "<td>" + carParts.partsPrice + "</td>" +
                        "<td>" + carParts.carPartsCount + "</td>" +
                        "<td>" + carParts.metering + "</td>" +
                        "<td>" + carParts.costPrice + "</td>" +
                        "<td>" + carParts.guidedPrice + "</td>" +
                        "<td>" + carParts.discountRate + "</td>" +
                        "<td>" + carParts.actualPrice + "</td></tr>";
                    $("#carCartsTable tr:last").after(tr);

                })


            }
        });
       $(".transPlus").click(function () {
           var val = $(this).next().val();
           var valCount = $(this).parent().next().next().next().html();
           if (parseInt(valCount)>0) {
               val=parseInt(val)+1;
               valCount=parseInt(valCount)-1;
               $(this).next().val(val);
               $(this).parent().next().next().next().html(valCount);
           }else {
               alert("没有更多的库存!")
           }
       });
        $(".transMinis").click(function () {
            var val = $(this).prev().val();
            var valCount = $(this).parent().next().next().next().html();
            if (parseInt(val)>0) {
                val=parseInt(val)-1;
                valCount=parseInt(valCount)+1;
                $(this).prev().val(val);
                $(this).parent().next().next().next().html(valCount);
            }else {
                alert("使用数不可以为负!")
            }
        });


        $("#myModal").modal();



        paging();
        $("#carPartsSubmit").click(function () {
            $("#selectedDecoration tr:not(:first)").remove();
            $("#carCartsTable tr:not(:first)").removeClass("hidden");
            $("#carCartsTable tr:not(:first)").each(function (index) {
                       
                    var str =  $("#carCartsTable tr:eq("+(index+1)+") td:eq(1) input").val();
                    if (str!='0') {
                        var tr=$("#carCartsTable tr:eq("+(index+1)+")").html();
                        var price1 = $('#carCartsTable tr:eq('+(index+1)+') td:eq(7)').html();
                        var num1=$('#carCartsTable tr:eq('+(index+1)+') td:eq(1) input').val()
                        var total=parseInt(price1)*parseInt(num1);


                        var newStr="<tr><td>"+(index+1)+"</td><td>"+$('#carCartsTable tr:eq('+(index+1)+') td:eq(2)').html()+"</td>"
                        +"<td>"+$('#carCartsTable tr:eq('+(index+1)+') td:eq(1) input').val()+"</td>"+
                            "<td>"+$('#carCartsTable tr:eq('+(index+1)+') td:eq(5)').html()+"</td>"+
                            "<td>"+$('#carCartsTable tr:eq('+(index+1)+') td:eq(7)').html()+"</td><td><input type='text' value='1.0' style='width: 30px' class='countDiscount'><input type='hidden' value='"+total+"'></td><td>"+price1+"</td><td>"+total+"</td></tr>";



                        $("#selectedDecoration").append(newStr);

                    }



            });
            /**计算总金额*/
            calculateMoney();
            $('#myModal').modal('hide');
            /**为折扣率注册事件*/
            $(".countDiscount").blur(function () {
                var c= $(this).val();
                if (isNaN(c)){
                    alert("请输入数字！")
                    $(this).val("1.0");
                    return;
                }
                var number = parseFloat(c);
                if (number<0||number>1){
                    alert("请输入合法数字！")
                    $(this).val("1.0");
                    return;
                }
                var va = $(this).parent().next().html();
                var newVa=parseInt(va)*number;
                $(this).parent().next().html(newVa);
                var va1 = $(this).parent().next().next().html();
                var newVa1=parseInt(va1)*number;
                $(this).parent().next().next().html(newVa1);
                calculateMoney();


            });
            /**为button注册点击事件*/
            submitCarParts();

        });



    }
</script>
<!--前端分页-->
<script type="text/javascript">
    function calculateMoney() {
        var i=0;
        var j=0
        $("#selectedDecoration tr:not(:first)").each(function () {
            var i1 = $(this).children(":last").html();
            var j1 = $(this).find("input:hidden").val();

            i=i+parseInt(i1);
            //计算总价格
            j=j+parseInt(j1);
        });

        $("#totalPrice").val(j);
        $("#receivables").val(i);
        var m=j-i;
        $("#givenMoney").val(m)

    }
    function paging() {

        //每页显示的数目
        var show_per_page = 2;
        //获取content对象里面，数据的数量
        var number_of_items = $("#carCartsTable tr:not(:first)").size();

        //计算页面显示的数量
        var number_of_pages = Math.ceil(number_of_items / show_per_page);

        //隐藏域默认值
        $('#current_page').val(0);
        $('#show_per_page').val(show_per_page);

        var navigation_html = '<a class="previous_link" href="javascript:previous();">上一页</a>';
        var current_link = 0;
        while (number_of_pages > current_link) {
            navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
            current_link++;
        }
        navigation_html += '<a class="next_link" href="javascript:next();">下一页</a>';

        $('#page_navigation').html(navigation_html);

        //add active_page class to the first page link
        $('#page_navigation .page_link:first').addClass('active_page');

        //隐藏该对象下面的所有子元素
        $("#carCartsTable tr:not(:first)").addClass("hidden");

        //显示第n（show_per_page）元素
        $("#carCartsTable tr:not(:first)").slice(0, show_per_page).removeClass("hidden");

    }

    //上一页
    function previous() {
        new_page = parseInt($('#current_page').val()) - 1;
        //if there is an item before the current active link run the function
        if ($('.active_page').prev('.page_link').length == true) {
            go_to_page(new_page);
        }

    }

    //下一页
    function next() {
        new_page = parseInt($('#current_page').val()) + 1;
        //if there is an item after the current active link run the function
        if ($('.active_page').next('.page_link').length == true) {
            go_to_page(new_page);
        }

    }

    //跳转某一页
    function go_to_page(page_num) {
        //get the number of items shown per page
        var show_per_page = parseInt($('#show_per_page').val());

        //get the element number where to start the slice from
        start_from = page_num * show_per_page;

        //get the element number where to end the slice
        end_on = start_from + show_per_page;

        //hide all children elements of content div, get specific items and show them
        $("#carCartsTable tr:not(:first)").addClass("hidden").slice(start_from, end_on).removeClass("hidden");

        /*get the page link that has longdesc attribute of the current page and add active_page class to it
        and remove that class from previously active page link*/
        $('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');

        //update the current page input field
        $('#current_page').val(page_num);
    }


</script>
<style>
    #page_navigation a {
        padding: 3px;
        border: 1px solid gray;
        margin: 2px;
        color: black;
        text-decoration: none
    }

    .active_page {
        background: darkblue;
        color: white !important;
    }
</style>

<script>
    function submitCarParts() {
        $("#decorationSubmit").click(function () {
            var myArray=new Array();
            $("#selectedDecoration tr:not(:first)").each(function (index) {

                var data={};
                data["carPartsNo"]="";
                data["carPartsName"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(1)" ).html();
                data["carPartsCount"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(2)" ).html();
                data["metering"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(3)" ).html();
                data["guidedPrice"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(4)" ).html();
                data["discountRate"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(5) input:first" ).val()
                data["actualPrice"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(6)" ).html();
                data["totalPrice"]=$("#selectedDecoration tr:eq("+(index+1)+") td:eq(7)" ).html();

                myArray.push(data);
            });

            var equipmentSheet={};

            equipmentSheet["equipmentSheetNo"]=$("#equipmentSheetNo").val();
            equipmentSheet["comment"]=$("#comment").val();
            equipmentSheet["startTime"]=$("#startTime").val();
            equipmentSheet["endingTime"]=$("#endingTime").val();
            equipmentSheet["totalPrice"]=$("#totalPrice").val();
            equipmentSheet["receivables"]=$("#receivables").val();
            equipmentSheet["givenMoney"]=$("#givenMoney").val();
            equipmentSheet["received"]=$("#received").val();

            var customer={};
            customer["customerId"]=$("#customerId").val();
            customer["customerName"]=$("#customerName").val();
            customer["customerTel"]=$("#customerTel").val();
            var car={};
            car["series"]=$("#series").val();
            car["model"]=$("#model").val();
            car["color"]=$("#color").val();
            car["carCard"]=$("#carCard").val();
            car["vin"]=$("#vin").val();
            var employee={};
            employee["employeeId"]=$("#employeeId").val();
            var upholsteryType={};
            upholsteryType["upholsteryType"]=$("#upholsteryType option:selected").val();
           var str=JSON.stringify({"equipmentSheet":JSON.stringify(equipmentSheet)
                ,"customer":JSON.stringify(customer),"car":JSON.stringify(car),
                "temporaryCarPartsLIst":JSON.stringify(myArray),"employee":JSON.stringify(employee),"upholsteryType":JSON.stringify(upholsteryType)});
            $.ajax({
                type: "POST",
                url: "insertEquipment",
                dataType: "json",
                contentType : "application/json;charset=utf-8",
                data:str ,
                success: function (flag){
                    alert("装潢单已保存，单号为"+flag);
                    window.close();
                    window.location.href="equipmentList";

                }






            })





        })
    }
</script>

</body>
</html>